<template>
  <div id="buy">
    <div class="head">
      <nav-bar> 值得买 </nav-bar>
    </div>
    <div class="bg"></div>
    <div class="tab-title">
      <img src="~assets/images/buy.png" alt="" class="utitle" />
      <div class="text">严选好物 用心生活</div>
    </div>
    <div class="worth">
      <worth-goods :goodsList="goodsList"></worth-goods>
    </div>
  </div>
</template>
<script>
import NavBar from "components/common/NavBar";
import WorthGoods from "components/buy/WorthGoods";

import { getTopicList } from "network/buy";
export default {
  name: "Buy",
  components: {
    NavBar,
    WorthGoods,
  },
  data() {
    return {
      goodsList: [],
    };
  },
  created() {
    getTopicList()
      .then((res) => {
        this.goodsList = res.data.data.data;
      })
      .catch((err) => {
        console.log(err);
      });
  },
};
</script>
<style scoped>
#buy {
  margin-bottom: 50px;
}
.bg {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  background-color: #eee;
}
.head {
  position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 4;
}
.tab-title {
  position: relative;
  width: 100%;
  height: 259px;
  background-image: url(~assets/images/rbuy.jpg);
  background-size: 375px 259px;
}
.tab-title .utitle {
  position: absolute;
  left: 115px;
  top: 40px;
}
.tab-title .text {
  position: absolute;
  left: 80px;
  top: 120px;
  color: #fff;
}
.worth {
  background-color: #eeeeee;
}
</style>